<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="../public/cdn/vue/2.6.10/vue.min.js"></script>
        <link rel="stylesheet" href="../public/cdn/element-ui/2.15.6/theme-chalk/index.css">
        <script src="../public/cdn/element-ui/2.15.6/index.js" charset="utf-8"></script>
        <script type="text/javascript" src="../public/cdn/axios/1.0.0/axios.min.js"></script>
        <script type="text/javascript" src="../public/cdn/mock/1.0.0/mock-min.js"></script>
    </head>

    <body>
        <!--模板-->
        <div id="test">
            <el-button type="primary" @click="cancel">取消</el-button>
        </div>
    </body>
    <script type="text/javascript">
        const vm = new Vue({
            el: '#test',
            data: {
                source: axios.CancelToken.source()  // 用于取消请求
            },
            created() {
                // 场景：在查询数据的时候，很长时间（3-5s）仍未获取数据，这个时候需要取消请求。
                // 使用mock.js模拟接口延迟返回
                Mock.mock("json/data.json", {
                    'username': '@cname',
                    'float|1-1000.2': 1,
                    'datetime': '@datetime("yyyy-MM-dd HH:mm:ss")'
                });
                //设置延迟时间:4000ms
                Mock.setup({
                    timeout:2000
                })
                axios
                    .get("json/data.json", {
                        cancelToken: this.source.token,
                    })
                    .then((resp) => {
                        this.$message.success("成功：" + JSON.stringify(resp.data))
                    })
                    .catch((err) => {
                        // 取消后这里能捕捉到{"message":"设置的字符串"}
                        console.log(err)
                        this.$message.error("失败" + err)
                    });
            },
            methods: {
                cancel() {
                    this.source.cancel("我手动取消了啊")
                }
            }
        })
    </script>
</html>
